<template>
	<view class="container" v-if="boxInfo">
		<u-navbar title-size="34" :title="boxInfo.name" back-icon-color="#292940" title-color="#292940" :border-bottom="false"
			:custom-back="tui.goBack" placeholder>
		</u-navbar>
		<view class="content">
			<view class="blind-img">
				<image :src="boxInfo.cover_url" mode="aspectFill"></image>
				<image class="back-img" src="/static/home/rota-bg.png" mode="aspectFill"></image>
			</view>
			<view class="base"></view>
			<view class="container-box">
				<view class="brief-box card-shadow">
					<view class="text-292940 font-weight-600 fz-36">{{boxInfo.name}}</view>
					<view class="d-flex">
						<view class="d-flex pt-2 pb-2">
							<span class="have-warp d-flex align-items-center">
								<view class="have-text text-343A40 fz-22">发行</view>
								<view class="d-flex align-items-center have-count">
									<span class="text-292940 font-DIN fz-26">{{boxInfo.count}}</span>
								</view>
							</span>
						</view>
						<view class="d-flex pt-2 pb-2">
							<span class="have-warp d-flex align-items-center">
								<view class="have-text text-343A40 fz-22">现存</view>
								<view class="d-flex align-items-center have-count">
									<span class="text-292940 font-DIN fz-26">{{boxInfo.all_count}}</span>
								</view>
							</span>
						</view>
						<view class="d-flex pt-2 pb-2">
							<span class="have-warp d-flex align-items-center">
								<view class="have-text text-343A40 fz-22">流通</view>
								<view class="d-flex align-items-center have-count ">
									<span
										class="text-292940 font-DIN fz-26">{{boxInfo.sell_count}}</span>
								</view>
							</span>
						</view>
					</view>

				</view>
				<view class="author-padding">
					<view class="d-flex justify-content-between align-items-center bilnd-title">
						<view class="font-weight-600 text-292940 fz-34">
							盲盒概率公示
						</view>
						<view class="text-999BA8 fz-24 d-flex">
							<span>您可能抽到以下作品中的</span>
							<span class="text-2E2E4A fz-28 mx-1">1</span>
							<span>个</span>
						</view>
					</view>
					<view class="author-box d-flex align-items-center" v-for="item in workList">
						<view class="author">
							<image :src="item.file" mode="aspectFill"></image>
						</view>
						<view>
							<view class="text-92940 font-weight-600 fz-32 pb-2">{{item.name}}</view>
							<view class="d-flex align-items-center">
								<span class="text-24 text-999BA8">概率</span>
								<span class="text-30 font-DIN text-292940 pl-2">{{tui.accMul(item.rate,100)}}</span>
								<span class="text-28 font-DIN text-292940">%</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box d-flex justify-content-between align-items-center">
			<view class="d-flex align-items-end text-292940">
				<span class="fz-36">￥</span><span class="font-DIN fz-52">{{boxInfo.min_price}}</span>
			</view>
			<u-button type="text" class="text-ffffff fz-36 btn-submit btn-style bid-bg" @tap="showBuy">立即购买
			</u-button>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="32" close-icon-pos="top-right" @close="close"
			:closeable="true">
			<view class="popup-box">
				<view class="d-flex justify-content-between align-items-center sort-box">
					<view class="text-292940 font-weight-600 fz-36">全部寄售</view>
					<view class="filter-icon" v-show="sort == 2" @click="changeSort(1)">
						<image src="/static/market/order-sel.png"></image>
					</view>
					<view class="filter-icon" v-show="sort == 1" @click="changeSort(2)">
						<image src="/static/market/order-pos.png"></image>
					</view>
				</view>
				<scroll-view scroll-y class="internet-h" @scrolltolower="scrolltolower">
					<template>
						<view class="batch-content d-flex justify-content-between align-items-center" v-for="item in sellList">
							<view class="d-flex align-items-center batch-content-left">
								<view class="user-icon">
									<image :src="item.user.avatar" mode="aspectFill"></image>
								</view>
								<view class="text-343A40 batch-content-name fz-28 font-DIN mb-1">{{boxInfo.name}}</view>
							</view>
							<view class="batch-content-center">
								<view class="text-292940 d-flex align-items-center">
									<span class="fz-30">￥</span>
									<span class="fz-40 font-DIN">{{item.price}}</span>
								</view>
								<view class="text-00C0FF batch-center-label" v-if="item.count <= 10">
									<span class="fz-22" style="line-height: 1em;">仅剩</span>
									<span class="fz-26"  style="line-height: 1em;">{{item.count}}</span>
								</view>
								<view class="batch-center-label surplus" v-else>
									<span class="fz-22 text-999BA8" style="line-height: 1em;">剩余</span>
									<span class="fz-26 text-666978" style="line-height: 1em;">{{item.count}}</span>
								</view>
							</view>
							<view class="yellow-bg text-ffffff fz-30 text-center btn" @tap="sellPopup(item)">购买</view>
						</view>
					</template>
					<u-loadmore :status="status" v-show="moreShow" margin-top="50" class="pb-3" />
				</scroll-view>
			</view>
		</u-popup>
		<u-popup v-model="batchShow" mode="center" border-radius="16" close-icon-pos="top-right" :closeable="true"
			@close="close">
			<view class="album-box">
				<view class="title">购买数量</view>
				<view class="item">
					<label class="text-36363A fz-32">数量</label>
					<u-input v-model="count" :focus="batchShow" :custom-style="customStyle" height="80" border="bottom"
						class="input-box" clearable label-width="0" placeholder="请输入购买数量" type="number"
						placeholder-style="color:#CCCDD5;" :border="false" clear-size="36">
					</u-input>
					<view class="d-flex align-items-center text-999BA8" v-if="nowItem">
						<span class="fz-26 mr-1">仅剩</span>
						<span class="fz-32 font-DIN">{{nowItem.count}}</span>
						<span class="fz-26">个</span>
					</view>
				</view>
				<u-button class="add-btn yellow-bg" @click="isCanBuy" hover-class="none">购买
				</u-button>
			</view>
		</u-popup>
		<u-popup v-model="isShowWaitOrder" mode="center" border-radius="16" closeable>
			<view class="album-box-pop">
				<view class="wallet-popup-bg">
					<view class="title text-292940 fz-36 text-center font-weight-600">提示</view>
					<view class="text-292940 fz-30 text-center">您有一个待付款订单，请前往支付</view>
					<!-- <view class="text-292940 fz-30 text-center">确认前往支付吗~</view> -->
					<view class="popup-btn-box d-flex justify-content-between align-items-center" >
						<!-- <u-button type="text" class="text-666978 fz-36  btn-style" @click="createNewOrder">创建订单</u-button> -->
						<u-button type="text" class="text-ffffff fz-36  btn-style yellow-bg" @click="toWaitOrder">去支付</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="showVerModal" ref="uModal" content="确定前往实名认证吗？" show-cancel-button  @confirm="toVer" confirmColor="#00C0FF"></u-modal>
		<u-modal v-model="showOpenWallet" ref="uModal" content="确定前往开通钱包吗？" show-cancel-button  @confirm="toWallet" confirmColor="#00C0FF"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				sellList: [],
				total: '',
				batchShow: false,
				count: 1,
				customStyle: {
					fontSize: '32upx'
				},
				status:'loading',
				show: false,
				sort: 1,
				boxInfo: null,
				workList: [],
				nowItem:null,
				buyLoaing:false,
				showVerModal:false,//是否前往实名认证
				showOpenWallet:false,//是否前往开通钱包
				isShowWaitOrder:false,//是否前往支付旧订单
				nowPayInfo:null,//当前准备购买的作品信息
				oldOrderId:''//旧待支付订单ID
			}
		},
		onLoad(options) {
			this.box_id = options.box_id
			this.getBoxShow()
			this.boxMarketSell()
		},
		computed: {
			USER() {
				return this.$store.state.auth.USER
			},
			//待付款列表
			waitList(){
				return this.$store.state.wallet.waitList
			}
		},
		watch:{
			//强制正整数
			count(val){
				if(val !== ''){
					this.$nextTick(()=>{
						this.count = val.replace(/^(0+)|[^\d]+/g,'')
					})
				}
			}
		},
		methods: {
			//关闭所有弹窗
			closeAllPop(){
				//盲盒列表 数量弹窗 待支付弹窗 购买loading 实名弹窗 开户弹窗
				this.show = false
				this.batchShow = false
				this.isShowWaitOrder = false
				this.buyLoaing = false
			},
			//前往实名认证
			toVer(){
				this.showVerModal = false
				uni.navigateTo({
					url:'/pages/setting/verified'
				})
			},
			//前往开通钱包
			toWallet(){
				this.showOpenWallet = false
				uni.navigateTo({
					url:'/pages/secondary/mine/wallet'
				})
			},
			//判断是否登录，是否实名认证，是否开通钱包
			showBuy(){
				//未登录则前往登录
				if(!this.USER){
					return uni.navigateTo({
						url:'/pages/login/login'
					})
				}
				//未认证，则提示是否前往实名认证
				if(this.USER.status == 0){
					return this.showVerModal = true
				}
				//未开通钱包，则提示是否前往开通钱包
				if(this.USER.wallet_count == 0){
					return this.showOpenWallet = true
				}
				this.show = true
			},
			//盲盒详情
			getBoxShow() {
				this.$store.dispatch('works/boxMarketShow', { market_id: this.box_id }).then(res => {
					this.boxInfo = res.data.market
					this.workList = res.data.works
				})
			},
			//盲盒挂售列表
			boxMarketSell(val){
				if(val == 1){
					this.page = 1
					this.sellList = []
					this.total = ''
				}
				this.moreShow = true
				this.status = 'loading'
				this.$store.dispatch('works/boxMarketSell',{box_id:this.box_id,page:this.page,sort:this.sort}).then(res=>{
					this.moreShow = false
					this.total = res.data.total
					this.sellList = [...this.sellList,...res.data.data]
				}).catch(error=>{
					this.moreShow = false
				})
			},
			//标识列表上拉加载
			scrolltolower() {
				if (!this.moreShow && this.sellList.length < this.total) {
					this.page++
					this.boxMarketSell()
				}else{
					this.moreShow = true
					this.status = 'nomore'
				}
			},
			close() {
				this.boxShow = false
				this.count = 1
			},
			//是否提示前往支付订单
			isTips(){
				if(this.waitList.length > 0){
					for(let i of this.waitList){
						/* if(i.blind_box_id == this.box_id){
							
						} */
						//当前时间
						let nowTime = parseInt(new Date().getTime() / 1000)
						//订单结束时间
						let endTime = new Date(i.created_at).getTime() / 1000 + 180
						//如果timestamp大于0，则表示订单未过期，提示选择订单支付
						let timestamp = endTime - nowTime
						if(timestamp > 0){
							this.oldOrderId = i.id
							this.batchShow = false
							return this.isShowWaitOrder = true
						}
					}
				}
				this.buyLoaing = true
				this.$store.dispatch('wallet/buyBox',this.nowPayInfo).then(res=>{
					this.buyLoaing = false
					this.getOrder()
					this.boxMarketSell(1)
					this.closeAllPop()
					uni.navigateTo({
						url:`/pages/secondary/mine/order-wait?order_id=${res.data.id}`
					})
				}).catch(error=>{
					this.buyLoaing = false
					if(error.data.code == 311){
						this.boxMarketSell(1)
					}
				})
			},
			//购买
			isCanBuy(val) {
				if (this.count === '') {
					return uni.$u.toast('请输入寄售数量')
				}
				if(this.count > this.nowItem.count){
					return uni.$u.toast('购买数量超出剩余个数')
				}
				this.nowPayInfo = {market_id:this.nowItem.id,type:3,count:this.count}
				this.isTips()
			},
			//创建新订单
			createNewOrder(){
				this.$store.dispatch('wallet/buyBox',this.nowPayInfo).then(res=>{
					this.getOrder()
					this.boxMarketSell(1)
					this.closeAllPop()
					uni.navigateTo({
						url:`/pages/secondary/mine/order-wait?order_id=${res.data.id}`
					})
				}).catch(error=>{
					this.isShowWaitOrder = false
					if(error.data.code == 311){
						this.boxMarketSell(1)
					}
				})
			},
			//支付旧订单
			toWaitOrder(){
				this.closeAllPop()
				uni.navigateTo({
					url:`/pages/secondary/mine/order-wait?order_id=${this.oldOrderId}`
				})
			},
			//获取待支付订单
			getOrder(){
				this.$store.dispatch('wallet/order',{status:1}).then(res=>{})
			},
			sellPopup(item) {
				this.nowItem = item
				this.batchShow = true
			},
			changeSort(val){
				this.sort = val
				this.boxMarketSell(1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background: #F8F9FB;
	}

	.content {
		width: 100%;
		padding: 43upx 0upx 0upx 0upx;
		box-sizing: border-box;
		background: #F8F9FB;
	}

	.blind-img {
		width: 580upx;
		height: 580upx;
		border-radius: 24upx;
		// background: linear-gradient(180deg, rgba(228, 228, 228, 1), rgba(175, 175, 175, 1));
		background: linear-gradient(180deg, #BAB5BA , #3B394A);
		margin: 0 auto;
		transform-style: preserve-3d;
		position: relative;
		animation: run 24s linear infinite;

		image {
			position: absolute;
			width: 560upx;
			height: 560upx;
			left: 10upx;
			top: 10upx;
			border-radius: 18upx;
			backface-visibility: hidden;
		}

		.back-img {
			transform: rotateY(180deg);
		}

	}

	@keyframes run {
		from {
			transform: rotateY(0deg);
		}

		to {
			transform: rotateY(360deg);
		}
	}

	.base {
		width: 100%;
		height: 210upx;
		background: url('/static/market/base-img.png') no-repeat;
		background-size: 100% 100%;
		margin-top: -30upx;
	}

	.container-box {
		width: 100%;
		padding: 0 24upx 160upx;
		margin-top: -40upx;
	}

	.brief-box {
		width: 100%;
		border-radius: 10px;
		padding: 27upx 23upx;
		margin-bottom: 20upx;
		box-sizing: border-box;
		height: 164upx;
		background: #FFFFFF;
		box-shadow: 0px 4px 30px -12px rgba(102, 105, 120, 0.2), 0px 4px 12px -6px rgba(154, 166, 219, 0.1);

		.me-icon {
			width: 36upx;
			height: 36upx;
			margin-right: 10upx;

		}

		.lable {
			display: inline-block;
			height: 40upx;
			line-height: 40upx;
			background: linear-gradient(44deg, rgba(255, 237, 188, .65) 0%, rgba(255, 248, 222, .65) 100%);
			border-radius: 20upx 20upx 20upx 2upx;
			color: #C97F37;
			padding: 0 20upx;
			margin: 22upx 20upx 22upx 0;

			image {
				width: 26upx;
				height: 26upx;
				margin-right: 10upx;
			}
		}

	}

	.author-padding {
		width: 100%;
		padding: 0 23upx 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 10upx;
	}

	.more-icon {
		width: 28upx;
		height: 28upx;
		margin-left: 10upx;

		image {
			width: 28upx;
			height: 28upx;
		}
	}

	.author-box {
		width: 100%;
		height: 146upx;
		border-radius: 16upx;
		border: 0.5px solid rgba(216, 222, 228, 0.8);
		margin-bottom: 20upx;
		padding: 0 16upx;

		.author {
			width: 112upx;
			height: 112upx;
			border-radius: 8upx;
			margin-right: 20upx;

			image {
				width: 112upx;
				height: 112upx;
				border-radius: 8upx;
			}
		}

	}

	.border {
		border-bottom: 1upx solid rgba(216, 222, 228, .8);
	}

	.btn-box {
		width: 100%;
		position: fixed;
		padding: 14upx 30upx 14upx 24upx;
		box-sizing: border-box;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background: #FFFFFF;

		.delete-box {}

		.btn-style {
			width: 400upx;
			height: 98upx;
			border-radius: 49upx;
			margin-right: 0;

		}

		.open-bg {
			background: linear-gradient(135deg, #2F9CFF 0%, #FE41FF 100%);
			
		}

		.bid-bg {
			background: linear-gradient(141deg, #7A60FF 0%, #1EF7FE 100%);
		}

	}

	/deep/.u-close--top-right {
		top: 18upx;
	}

	/deep/.u-checkbox__icon-wrap {
		background: #F8F9FB;
	}

	.have-warp {
		display: inline-block;
		min-width: 108upx;
		height: 36upx;
		line-height: 36upx;
		background: #EAFDFF;
		border-radius: 8upx;
		position: relative;
		margin-right: 24upx;
		margin-top: 6upx;
		border: 1upx solid #BAF5FF;
		.have-text {
			display: inline-block;
			padding: 0 10upx;
			height: 36upx;
			line-height: 36upx !important;
			background: linear-gradient(360deg, rgba(30,247,254,0.95) 0%, rgba(122,96,255,0.4) 100%);
			border-radius: 8upx 0upx 16upx 8upx;
		}
		.have-count {
			display: inline-block;
			height: 36upx;
			line-height: 36upx;
			padding: 0 10upx;
			margin: 0 auto;
		}
	}

	.sell-count-bg {
		background: #FDF5E7;
	}

	.bilnd-title {
		width: 100%;
		height: 94upx;

	}

	.album-box {
		width: 640upx;
		background: #FFFFFF;
		padding: 50upx 45upx 60upx 45upx;

		.title {
			color: #292940;
			font-size: 36upx;
			text-align: center;
			font-weight: 500;
		}

		.item {
			width: 100%;
			height: 182upx;
			box-sizing: border-box;
			padding-top: 50upx;
			border-bottom: 1upx solid #D8DEE4;
			position: relative;
			margin-bottom: 74upx;
			color: #292940;
			font-size: 36upx;

			.input-box {
				width: 100%;
				margin-top: 10upx !important;
				font-size: 40upx !important;
			}
		}

		.add-btn {
			width: 544upx;
			height: 98upx;
			border-radius: 49upx;
			color: #FFFFFF;
			font-size: 36upx;
			text-align: center;
		}

	}

	.popup-box {
		width: 100%;
		background: #ffffff;
		padding: 66upx 0 0;
		box-sizing: border-box;

		.filter-icon {
			width: 44upx;
			height: 44upx;
			margin-left: 20upx;

			image {
				width: 44upx;
				height: 44upx;
			}
		}

		.batch-content {
			width: 100%;
			padding: 0 30upx;
			box-sizing: border-box;
			height: 129upx;
			border-bottom: 1upx solid rgba(216, 222, 228, .6);

			.batch-center-label {
				display: inline-block;
				height: 34upx;
				border-radius:4upx 100upx 100upx 100upx;
				background: rgba(0,192,255,0.06);
				border: 1upx solid rgba(0,192,255,0.5);
				padding:0 10upx;
				line-height: 26upx;
			}
			.surplus{
				background: #F8F9FB !important;
				border-radius: 4upx;
				border: 1upx solid #D8D9E1 !important;
				line-height: 26upx;
			}
			.user-icon {
				width: 56upx;
				height: 56upx;
				margin-right: 12upx;

				image {
					width: 56upx;
					height: 56upx;
					border-radius: 100%;
				}
			}
			.batch-content-left{
				width: 36%;
			}
			.batch-content-name{
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.batch-content:nth-last-of-type(1) {
			border-bottom: none;
			margin-bottom: 20upx;
		}


		.internet-h {
			// min-height: 390upx;
			// max-height: 714upx;
			height: 720upx;
			overflow-y: auto;
		}

		.btn {
			width: 158upx;
			height: 56upx;
			line-height: 56upx;
			border-radius: 44upx;
		}

		.pt {
			margin-top: 6upx;
		}

		.sort-box {
			height: 36upx;
			padding: 0 30upx;
			box-sizing: border-box;
			margin-top: 33upx;
		}

	}

	/deep/.uicon-close:before {
		margin-top: 6px;
	}
	.batch-content-center{
		text-align: left;
		flex: 1;
		padding-left: 4%;
	}
	.album-box-pop {
		padding-bottom: 60upx;
		width: 640upx;
		.wallet-popup-logo{
			width: 98upx;
			height: 98upx;
			margin:0 auto 0;
			image{
				width: 98upx;
				height: 98upx;
				vertical-align: top;
			}
		}
		.wallet-popup-bg{
			width: 640upx;
			border-radius: 16upx;
			.title {
				padding-top: 60upx;
				margin-bottom: 30upx;
			}
				
			.popup-btn-box {
				padding: 0 40upx;
				box-sizing: border-box;
				margin-top: 59upx;
				.btn-style {
					width: 440upx;
					height: 88upx;
					background: rgba(216,217,225,0.5);
					border-radius: 49upx;
				}
			}
		}
	}
</style>
